<template>
  <div id="main">
    <div name="test" style="padding-top:1%">
      <span
        style="color:green;
            font-weight:bold;
            font-size:30px;"
        >测试</span
      >
      <div style="padding-top:1%">
        <span>请回答以下问题，以确保您已经理解了实验规则。</span><br />
      </div>
      <div name="attention" style="padding-top:1%">
        <span
          style="font-weight:bold;
            font-size:25px;"
          >注意</span
        ><br /><br />
        <span>每轮开始时，每个人将获得10个点的初始资金。</span> <br /><br />
        <span
          >每轮投资结束后，所有成员的投资值将加总并扩大1.5倍，并在所有人之间平均分配。</span
        ><br /><br />
      </div>
      <div id="ridio">
        <div id="question1" style="padding-top:1%">
          <span style="color:blue">问题1. 考虑以下两种情形:</span><br /><br />
          <span>a. 2个小组成员都投资了0个点</span><br /><br />
          <span>b. 2个小组成员都投资了3个点</span><br /><br />
          <span>在哪种情形下您会得到更多的点数?</span><br /><br />
          <!-- 显示选择框按钮 -->
          <div>
            <el-radio v-model="radio1" label="1" border @change="agreechange1"
              >A.情形a</el-radio
            >
            <el-radio v-model="radio1" label="2" border @change="agreechange1"
              >B.情形b</el-radio
            >
            <el-radio v-model="radio1" label="3" border @change="agreechange1"
              >C.一样多</el-radio
            >
          </div>
          <span v-if="this.radio1show == 2">
            <br />
            <el-alert
              title="the value you choose is not correct"
              center
              type="error"
              closable="false"
            ></el-alert>
          </span>
          <span v-if="this.radio1show == 1">
            <br />
            <el-alert
              title="the value you choose is correct"
              center
              type="success"
              closable="false"
            ></el-alert>
          </span>
        </div>
        <div id="question2" style="padding-top:1%">
          <span style="color:blue">问题2. 考虑以下两种情形:</span><br /><br />
          <span>a. 组内其他1个成员都投资了3个点，但你投资了0个点</span
          ><br /><br />
          <span>b. 2个小组成员都投资了3个点</span><br /><br />
          <span>在哪种情形下您会得到更多的点数?</span><br /><br />
          <!-- 显示选择框按钮 -->
          <div>
            <el-radio v-model="radio2" label="4" border @change="agreechange2"
              >A.情形a</el-radio
            >
            <el-radio v-model="radio2" label="5" border @change="agreechange2"
              >B.情形b</el-radio
            >
            <el-radio v-model="radio2" label="6" border @change="agreechange2"
              >C.一样多</el-radio
            >
          </div>
          <span v-if="this.radio2show == 2">
            <br />
            <el-alert
              title="the value you choose is not correct"
              center
              type="error"
              closable="false"
            ></el-alert>
          </span>
          <span v-if="this.radio2show == 1">
            <br />
            <el-alert
              title="the value you choose is correct"
              center
              type="success"
              closable="false"
            ></el-alert>
          </span>
        </div>
      </div>
    </div>
    <span v-show="this.radio1show==1 && this.radio2show==1">
      <a
        href="#"
        class="submit"
        style="
            margin-top:20px;
            display:inline-block;
            padding: 18px 30px;
            color:#fff !important;
            font-weight:bold;
            font-size:16px;
            border-radius:10px;
            text-decoration:none !important;
            line-height:1;
            text-transform: uppercase;
            background-color:transparent;

            -webkit-transition:background-color 0.25s;
            -moz-transition:background-color 0.25s;
            transition:background-color 0.25s;
            background-color:#cc3d6a;"
        >进入投资</a
      >
    </span>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data () {
    return {
      radio1: '',
      radio2: '',
      radio1show: 0,
      radio2show: 0
    }
  },
  methods: {
    agreechange1: function (val) {
      let that = this
      if (val !== '2') {
        that.radio1show = 2
      } else {
        that.radio1show = 1
      }
    },
    agreechange2: function (val) {
      let that = this
      if (val !== '4') {
        that.radio2show = 2
      } else {
        that.radio2show = 1
      }
    }
  }
}
</script>
